<template>
    <div class="tabbar-container" v-if="visible" :class="themeClass">
      <div 
        v-for="(item, index) in tabItems" 
        :key="index" 
        class="tab-item"
        :class="{ active: activeIndex === index }"
        @click="handleTabClick(index, item.route)"
      >
        <div class="icon">
          <van-icon :name="activeIndex === index ? item.activeIcon : item.icon" size="20" />
        </div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n';
  import { useThemeStore } from '@/stores/theme';
  
  const { t } = useI18n();
  const route = useRoute();
  const router = useRouter();
  const themeStore = useThemeStore();
  
  const props = defineProps({
    visible: {
      type: Boolean,
      default: true
    }
  });
  
  const activeIndex = ref(0);
  
  const tabItems = computed(() => [
    {
      icon: 'home-o',
      activeIcon: 'wap-home',
      label: t('common.home'),
      route: '/'
    },
    {
      icon: 'gold-coin-o',
      activeIcon: 'gold-coin',
      label: t('common.fundsCenter'),
      route: '/funds'
    },
    {
      icon: 'apps-o',
      activeIcon: 'apps',
      label: t('common.cardCategory'),
      route: '/categories'
    },
    {
      icon: 'credit-pay',
      activeIcon: 'credit-pay',
      label: t('common.cardCenter'),
      route: '/cards'
    },
    {
      icon: 'user-o',
      activeIcon: 'user',
      label: t('common.mine'),
      route: '/profile'
    }
  ]);
  
  const themeClass = computed(() => themeStore.currentTheme);
  
  // 监听路由变化更新激活状态
  watch(() => route.path, (newPath) => {
    const index = tabItems.value.findIndex(item => item.route === newPath);
    if (index !== -1) {
      activeIndex.value = index;
    }
  }, { immediate: true });
  
  const handleTabClick = (index, routePath) => {
    activeIndex.value = index;
    router.push(routePath);
  };
  </script>
  
  <style lang="scss" scoped>
  .tabbar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    transition: all 0.3s;
    
    &.light {
      background-color: var(--card-bg);
      color: var(--text-secondary);
      border-top: 1px solid var(--border-color);
      
      .tab-item.active {
        color: var(--primary-color);
      }
    }
    
    &.dark {
      background-color: var(--card-bg);
      color: var(--text-secondary);
      border-top: 1px solid var(--border-color);
      
      .tab-item.active {
        color: var(--primary-color);
      }
    }
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      height: 100%;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        opacity: 0.8;
      }
      
      .icon {
        margin-bottom: 4px;
      }
      
      .label {
        font-size: 12px;
      }
    }
  }
  </style>